﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price0">¥21.90</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>
<script>
	var plusbtns = document.getElementsByName("plus");
	var minusbtns = document.getElementsByName("minus");
	var prices = document.getElementsByName("price");
	var amounts = document.getElementsByName("amount");
	var totalPrice = document.getElementById("totalPrice");
	function calcTotal(){
		var total = 0;
		for(var K=0;K<prices.length;K++){
			var p =document.getElementById("price"+K);
			total = total + parseFloat(p.innerHTML.substring(1));
		}
		totalPrice.innerHTML = "&yen;"+toround(total);
	}
	calcTotal();
	for(var i=0;i<plusbtns.length;i++){
		plusbtns[i].xuhao = i;
		plusbtns[i].onclick = function(){
			var j = this.xuhao;
			amounts[j].value = parseInt(amounts[j].value) + 1;
			var price = document.getElementById("price"+j);
			price.innerHTML = "&yen;"+
			toround(amounts[j].value * prices[j].value);
			calcTotal();  
		};
	}
	for(var i=0;i<minusbtns.length;i++){
		minusbtns[i].xuhao = i;
		minusbtns[i].onclick = function(){
			var j = this.xuhao;
			if(parseInt(amounts[j].value)>1){
				amounts[j].value = parseInt(amounts[j].value) - 1;
				var price = document.getElementById("price"+j);
				price.innerHTML = "&yen;"+
				toround(amounts[j].value * prices[j].value);
				calcTotal();
			}
		};
	}
	function toround(j){
		j = Math.round(j * 100)/100;
		if((j+"").indexOf(".")==-1){
			return j+".00";
		}else{
			return j+"0";
		}
	}
</script>

</body>
</html>

